<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS-Demo</title>
    <link rel="stylesheet" href="cssdemo.css">
</head>
<body>
    <div class="beverages">
        <h2>谷粒多</h2>
        <h3>红豆花生</h3>
    </div>

    <div class = "chocolate">
        <h3>巧克力</h3>
        哟嚯!!快来吃巧克力拉 ~ ~ ~ <p></p>
        哟嚯!!快来吃巧克力拉 ~ ~ ~ 
    </div>

    <div class="five">
       
    </div>
   


    <div class = "one">
        <div class = "two">1</div>
        <div class = "three">2</div>
        <div class = "four">3</div>
    </div>

    <div style="color: pink; font-size: 150px; ">brand new world</div>

    <style>
        

        .chocolate{
            font-size: 40px;
            /* 文本颜色 */
            color: red;
            /* 文本对齐 左对齐 left，右对齐 right，居中对齐 center */
            text-align: center;
            /* 文本装饰 加下划线之类的 */
            text-decoration: underline;
            /* 文本缩进 首行缩进多大空间 */
            text-indent: 50px;
            /* 行间距 */
            line-height: 100px;

        }

         .chocolate h3{
            /* 字体设置*/
            font-family: '微软雅黑';
            /* 字体大小 */
            font-size: 40px;
            /* 字体粗细 */
            font-weight: 900;
            /* 字体样式，是否倾斜 */
            font-style: italic;

        }  
        

        .beverages h2{
            color: rgb(255,192,153);
        }

        .beverages h3{
            color: blueviolet;
        }


        .one{
            margin-top: 100px;
            width: 200px;
            height: 300px;
            background-color: aqua;
        }

        .two{
            width: 50px;
            height: 50px;
        }

        .three{
            width: 50px;
            height: 100px;
        }

        .five{
            font-size: 10px;
            width: 2000px;
            height: 1800;

            color: red;

            /* 背景颜色 */
            background-color: pink;
            /* 背景图片 */
            background-image: url(wujing.jpeg);
            /* 图片是否平铺 */
            background-repeat: no-repeat;

            /* 图片位置 */
            background-position: center center;
            /* 图片尺寸 */
            background-size: 2000px 1600px;
        }

       
        
    </style>
        
</body>
</html>